<template>
	<view class="page">
		<view class="app">
		    <button type="warn" class="btnMall" @click="openSkuPopup()">兑换商品</button>
			<uni-popup ref="popup"  background-color="#fff">
				<echone-sku
				  :show="true"
				  :theme-color="themeColor"
				  :combinations="combinations"
				  :specifications="specifications"
				  :default-select-index="selectedIndex"
				  :specifications-props="specificationsProps"
				  @close="handleClose"
				  @confirm="handleConfirm"
				></echone-sku>	
			</uni-popup>
		  </view>	
		<swiper class="header"   :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="duration" :circular="true">
			<swiper-item class="header_img" v-for="item in mallData" :key="item.Id">
				<image :src="item.good_ImgUrl" mode=""></image>
			</swiper-item>	
		</swiper>
		<view class="mallName" v-for="item in mallData" :key="item.Id">
			<view>{{item.good_Name}}</view>
			<view class="jifen">
				{{item.good_DuiHuanJiFen}} 积分
			</view>
			<view class="kucun">
				<span >市场价 ￥{{item.good_ShiChangJiaGe}}</span>
				<span >{{item.good_KuChun>50?'库存充足':item.good_KuChun}}</span>
			</view>
		</view>
		<view class="content" v-for="item in detailsData" :key="item.Id">
			<view>
				商品详情
			</view>
			<view class="contentList" >
				<view>
					<view>商品名称:{{item. details_Name}}</view>
					<view>商品毛重:{{item.details_Zhong}}kg</view>
					<view>组合形式:{{item.details_ZuHe}}</view>
				</view>
				<view>
					<view>商品产地:{{item.details_Area}}</view>
					<view>面料:{{item.details_MianLiao}}</view>
				</view>
			</view>	
				<image class="img" :src="item.details_Img1" mode=""></image>
				<image class="img" :src="item.details_Img2" mode=""></image>
		</view>
		<view class="footer">
			<view class="">
				<h2>温馨提示</h2>
				<p>1.商品兑换后3个工作日内发货并更新物流信息</p>
				<p>2.全场商品包邮(新疆、西葱、青海、内蓑古、海外等 偏远地区根据实际情况需要支付相应邮费)</p>
			</view>
			<view class="">
				<h2>重要声明</h2>
				<p>商品退换贷导致的积分退回及售后服务流程，请查看积
				分规则说明。请用户兑换前仔细参照使用规则、商品详
				情有效期等重要信息
				</p>
				<p>
				对于每位用户限兑--次的商品，若发现多个用户账号使 用相同手机号或收货地址兑换同一个商品，则自动取消
				用相同手机号或收货地址兑换同一个商品，则自动取消 订单，被扣除的积分不予退还。
				</p>
			</view>
		</view>
		

	</view>
</template>

<script>
	// 商品规格弹窗
	import echoneSku from '@/components/echone-sku/echone-sku.vue'

	var that; 
	
	export default {
		
		components: {
		    echoneSku,
		  },
		  
		data() {
			return {
				// 商品规格弹窗
				specifications: [
				  {
				    name: '商品规格',
				    id: '1',
				    list:['规格一','规格二','规格三'],
				  },
				  {
				    name: '支付方式',
				    id: '2',
				    list:['积分'],
				  },
				],
				combinations: [
				  {
				    id: '1',
				    value: '',
				    image:'',
				    price: '',
				    stock: '',
					name:'',
				  },
				],
				// 轮播图
				tanData:[],
				mallData:[],
				arr1:[],
				detailsData:[],
				
			}
		},
		onLoad:function(option) {
			console.log(option)
		    uni.request({
		    	url:'http://localhost:3001/IdGoods',
				method:'post',
				data:{
					Id:option.id
				},
				success:(res)=> {
					console.log(res.data.data[0])
					this.mallData = res.data.data
					this.specifications[0].list.push(String(res.data.data[0].good_ShangPinGuiGe))
					this.specifications[1].list.push(String(res.data.data[0].good_DuiHuanJiFen))

					this.combinations[0].image=res.data.data[0].good_ImgUrl
					this.combinations[0].value=res.data.data[0].good_ShangPinGuiGe
					this.combinations[0].price=res.data.data[0].good_DuiHuanJiFen
					this.combinations[0].stock=res.data.data[0].good_KuChun
					this.combinations[0].name=res.data.data[0].good_Name
					console.log(this.combinations[0])
				}
				}) ,
				uni.request({
					url:'http://localhost:3001/getMall',
					method:'post',
					data:{
						Id:option.id
					},
					success:(res)=>{
						console.log(res.data)
						this.detailsData=res.data.data
					}
				})
		    },
		methods: {
			openSkuPopup(){
				this.$refs.popup.open('buttom')
			},
			handleClose(){
				this.$refs.popup.close()
				
			},
				
			handleConfirm(goods){
				console.log(goods)
				uni.navigateTo({
					url:'/pages/PaymentPage/PaymentPage?goods='+ encodeURIComponent(JSON.stringify(goods))
				}); 
			}
			
		},
		
		
	}
</script>

<style lang="scss">
.sunui>.sunui-title {
	        margin-bottom: 2%;
	    }
.tanC{
	width: 750rpx;
	height: 850rpx;
}
.tanC_top{
	width: 750rpx;
	height:200rpx;
	display: flex;
	justify-content: space-between;
}
.tanC_left{
	width: 200rpx;
	height: 200rpx;
	display: flex;
	justify-content: space-between;
}
.tanC_right{
	width:520rpx ;
	height: 200rpx;	
}
.jifen_right{
	margin: 30rpx 0;
	display: flex;
	justify-content: space-between;
}
.jifen_right :nth-child(1){
	color: red;
	font-size: 40rpx;
}
.jifen_right>p{
	
.tanC_num{
	margin: 20rpx 0;
	width: 100%;
	height: 80rpx;
	border: 1px solid red;
}	
}
.btnSure{
	position: relative;
	bottom: 0rpx;
	width:  700rpx;
	border-radius: 10rpx;
}
.app {
	    padding: 30rpx;
	    font-size: 28rpx;
	  }
.page{
	width: 100%;
	height: 100%;
	background-color: gainsboro;
	
}	
.btnMall{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	// margin: 0 auto;
	// top: 1000rpx;
	// width: 700rpx;
	// left: 25rpx;
	border-radius: 10rpx;
}
.header{
	background-color: white;
	width: 700rpx;
	height: 600rpx;	
	margin: 0 auto;
	padding: 30rpx 20rpx;
}
.header_img>image{
	width: 100%;
	height: 600rpx;
}	
.mallName{
	font-size: 36rpx;
	width: 700rpx;
	height: 200rpx;
	background-color: white;
	margin: 40rpx auto;	
	padding: 40rpx 20rpx;
}
.jifen{
	margin: 30rpx 0;
	font-size: 30rpx;
	color: red;
}
.kucun{
	font-size: 25rpx;
	display: flex;
	justify-content: space-between;
	color: gray;
}	
.content{
	width: 700rpx;
	height: 1800rpx;
	background-color: white;
	margin: 20px auto;
	padding: 30rpx 20rpx;
}
.contentList{
	margin: 20px auto;
	display: flex;
	justify-content: space-around;
}	
.img{
	width: 100%;
	height: 750rpx;
}
.footer{
	background-color: white;
	width: 700rpx;
	height: 650rpx;	
	margin: 0 auto;
	padding: 30rpx 20rpx;
}
</style>
